<template>
  <div id="main">
    <div className="container">
      <div className="resNumber"></div>
      <div className="chooseCategories">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="全部" name="first">

          </el-tab-pane>
          <el-tab-pane label="用户" name="second">

          </el-tab-pane>
          <el-tab-pane label="圈子" name="third">

          </el-tab-pane>
          <el-tab-pane label="数码产品" name="fourth">
            <!--  -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <div className="result">
        <!-- <Commodity></Commodity> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Commodity from "../../components/commodity/index.vue"
const activeName = ref("first");

const handleClick = (tab, event) => {

};
</script>

<style scoped lang="scss">
#main {
  height: 100%;
  margin-top:10px;
  .container {
    width: 95%;
    height: 1000px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 1200px) {
  #main {
    height: 100%;
    margin-top: 185px;
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #f6f6f6;
  font-size: 32px;
  font-weight: 600;
}

</style>
